<template>
    <div class="pos">
        <div>
            <el-row>
                <el-col :span='7' class="pos-order" id="order-list">
                    <el-tabs tab="border-card">
                        <el-tab-pane label="点餐">
                            <el-table :data="tableData" border style="width: 100%;">
                                <el-table-column  prop="goodsName" label="商品"></el-table-column>
                                <el-table-column prop="count" label="量" width="100"></el-table-column>
                                <el-table-column prop="price" label="金额" width="100"></el-table-column>
                                <el-table-column label="操作" width="100" fixed="right">
                                    <template slot-scope="scope">
                                        <el-button type="text" size="small" @click="delSingleGoods(scope.row)">删除</el-button>
                                        <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="挂单">挂单</el-tab-pane>
                        <el-tab-pane label="外卖">外卖</el-tab-pane>
                    </el-tabs>
                    <!--按钮-->
                        <el-button type="warning" class="el-button">接单</el-button>
                        <el-button type="danger" class="el-button" @click="delAllGoods()">删除</el-button>
                        <el-button type="success" class="el-button" @click="checkout()">结算</el-button>
                </el-col>
                <el-col :span='17'>
                    <div class="often-goods">
                        <div class="title">常用商品</div>
                        <div class="often-goods-list">
                            <ul>
                                <li v-for="goods in oftenGoods" @click="addOrderList(goods)">
                                    <span>{{goods.goodsName}}</span>
                                    <span class="o-price">￥{{goods.price}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="goods-type">
                        <el-tabs>
                            <el-tab-pane label="汉堡">
                                <div>
                                    <ul class='cookList'>
                                        <li v-for="goods in type0Goods"
                                            @click="addOrderList(goods)">
                                            <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                                            <span class="foodName">{{goods.goodsName}}</span>
                                            <span class="foodPrice">￥{{goods.price}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="小食品">
                                <div>
                                    <ul class='cookList'>
                                        <li v-for="goods in type1Goods"
                                            @click="addOrderList(goods)">
                                            <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                                            <span class="foodName">{{goods.goodsName}}</span>
                                            <span class="foodPrice">￥{{goods.price}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="饮料">
                                <div>
                                    <ul class='cookList'>
                                        <li v-for="goods in type2Goods"  @click="addOrderList(goods)">
                                            <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                                            <span class="foodName">{{goods.goodsName}}</span>
                                            <span class="foodPrice">￥{{goods.price}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="套餐">
                                <div>
                                    <ul class='cookList'>
                                        <li v-for="goods in type3Goods"  @click="addOrderList(goods)">
                                            <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                                            <span class="foodName">{{goods.goodsName}}</span>
                                            <span class="foodPrice">￥{{goods.price}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-col>
            </el-row>

        </div>
    </div>
</template>

<!--在script中 type="text/ecmascript-6"-->
<script type="text/ecmascript-6">
    import axios from 'axios';
    export default {
        name: 'pos',
        data:function() {
            return{
                tableData: [],
                oftenGoods:[],
                type0Goods:[],
                type1Goods:[],
                type2Goods:[],
                type3Goods:[]

            }

        },
        /*
        * */
        methods:{
            /*handleClick(row) {
                console.log(row);
            },*/
            deleteRow(index,rows) {
                rows.splice(index, 1);
            },
            //删除单个商品
            delSingleGoods(goods){
                //console.log(goods);
                this.tableData=this.tableData.filter(o => o.goodsId !=goods.goodsId);
            },
            //删除全部商品
            delAllGoods(){
                this.tableData=[];
                this.totleData = 0;
                this.totalMoney = 0;
            },
            //汇总数量和金额
            getAllmoney(){
                this.totalCount = 0;
                this.totalMoney = 0;
                if(this.tableData){
                    this.tableData.forEach((element)=>{
                        this.totalCount+= element.count;
                        this.totleMoney = this.totalMoney + (element.price*element.count);
                    });
                }
            },
            checkout() {
                if (this.totalCount!=0) {
                    this.tableData = [];
                    this.totalCount = 0;
                    this.totalMoney = 0;
                    this.$message({
                        message: '结账成功，感谢你又为店里出了一份力!',
                        type: 'success'
                    });

                }else{
                    this.$message.error('不能空结。老板了解你急切的心情！');
                }

            },
            addOrderList(goods){
                //商品是否存在订单列表中
                //根据判断在的值写业务逻辑
                this.totalCount=0; //汇总数量清0
                this.totalMoney=0;
                let isHave=false;
                //判断是否这个商品已经存在于订单列表
                for (let i=0; i<this.tableData.length;i++){
                    console.log(this.tableData[i].goodsId);
                    if(this.tableData[i].goodsId==goods.goodsId){
                        isHave=true; //存在
                    }
                }
                //根据isHave的值判断订单列表中是否已经有此商品
                if(isHave){
                    //存在就进行数量添加
                    let arr = this.tableData.filter(o =>o.goodsId == goods.goodsId);
                    arr[0].count++;
                    arr[0].price = arr[0].count*arr[0].price ;
                    console.log(arr[0].price);
                }else{
                    //不存在就推入数组
                    let newGoods={goodsId:goods.goodsId,goodsName:goods.goodsName,price:goods.price,count:1};
                    this.tableData.push(newGoods);
                }
                //进行数量和价格的汇总计算
                this.tableData.forEach((element) => {
                    this.totleCount += element.count;
                    this.totleMoney = this.totleMoney+(element.price*element.count)
                } )

            }

        },
        /*
        用axios来获取后端数据
        从远端读取数据
        在creat里面写
        */
        created: function () {
            axios.get('http://jspang.com/DemoApi/oftenGoods.php')
            .then(response =>{
                console.log(response);
                this.oftenGoods= response.data
            })
            .catch('网络错误，不能访问');

            axios.get('http://jspang.com/DemoApi/typeGoods.php')
                .then(response =>{
                console.log(response);
                this.type0Goods = response.data[0];
                this.type1Goods = response.data[1];
                this.type2Goods = response.data[2];
                this.type3Goods = response.data[3]
            })
            .catch('网络错误，不能访问')
        },
        mounted: function () {
            var orderHeight = document.body.clientHeight;
            console.log(orderHeight);
            document.getElementById('order-list').style.height = orderHeight + 'px'
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .pos-order {
        background-color: #f9fafc;
        border-right: 1px solid #888;
    }
    .cell{
        text-align: center;

    }
    .el-button{
        margin-top: 5px;
    }
    .title{
        height:20px;
        border-bottom: 1px solid #D3DCE6;
        background-color: #F9FAFC;
        padding:10px;
    }
    .often-goods-list ul li{
        list-style: none;
        float: left;
        border:1px solid #E5E9F2;
        padding: 10px;
        margin: 5px;
        background-color: #fff;
        cursor: pointer;
    }
    .o-price{
        color: #58B7FF;
    }
    .goods-type{
        clear: both;
    }
    .cookList{

    }
    .cookList li{
        float: left;
        list-style: none;
        width: 23%;
        border:1px solid #555;
        padding: 2px;
        margin: 2px;
        height:auto;
        cursor: pointer;

    }
    .cookList li span{
        display: block;
        float: left;
    }
    .foodImg{
        width: 40%;
    }
    .foodName{
        font-size: 18px;
        padding-left: 10px;
        color: brown;
    }
    .foodPrice{
        font-size:16px;
        padding-left: 10px;
        padding-top: 10px;
    }

</style>
